import { Modal, message } from "antd";
import * as React from "react";
import FormRender from "form-render/lib/antd";
import { schema } from "./from.json";
import { cloneDeep } from "lodash";
import { updateDevice, addDevice } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
export interface ModalDetailProps {
  defaultValue?: any;
  visible: boolean;
  onOk: () => any;
  onCancel: () => any;
}

export interface ModalDetailState {
  visible: boolean;
  formData: any;
  valid: string[];
  fromPass: boolean;
}

class ModalDetail extends React.Component<ModalDetailProps, ModalDetailState> {
  state = { visible: false, formData: {}, valid: [], fromPass: false };
  shouldComponentUpdate(
    newProps: ModalDetailProps,
    newState: ModalDetailState
  ) {
    if (newProps.visible !== this.props.visible) {
      this.setState({ visible: newProps.visible });
      if (newProps.defaultValue) {
        console.log(newProps.defaultValue);
        let defaultValue = cloneDeep(newProps.defaultValue);
        this.setState({ formData: defaultValue });
      }
    }
    return true;
  }
  handleOk() {
    this.onSubmit();
  }
  handleCancel() {
    this.props.onCancel();
    this.clearFrom();
  }
  //提交校验
  onSubmit = () => {
    // valid 是校验判断的数组，valid 长度为 0 代表校验全部通过

    let { valid, formData } = this.state;

    if (valid.length > 0) {
      message.error(`校验未通过,请检查字段输入`);
    } else {
      this.setState({ fromPass: true });
      if (this.props.defaultValue) {
        console.log("编辑", formData);
        this.updateDeviceData(formData);
      } else {
        this.addDeviceData(formData);
      }
    }
  };
  clearFrom() {
    this.setState({ formData: {}, valid: [], fromPass: false });
  }
  async addDeviceData(item: any) {
    try {
      let res: any = await addDevice(JSON.stringify(item));
      let json: AjaxData = res;
      if (json.success) {
        this.props.onOk();
        this.clearFrom();
      }
    } catch (error) {}
  }
  async updateDeviceData(item: any) {
    let pream = cloneDeep(item);
    pream.id = this.props.defaultValue.id;
    // console.log(pream, this.props.defaultValue);
    try {
      let res: any = await updateDevice(JSON.stringify(pream));
      let json: AjaxData = res;
      if (json.success) {
        this.props.onOk();
        this.clearFrom();
      }
    } catch (error) {
      Modal.error({
        title: error,
      });
    }
  }
  render() {
    return (
      <Modal
        className="ModalDetail"
        title={this.props.defaultValue ? "编辑设备" : "新增设备"}
        visible={this.state.visible}
        onOk={() => {
          this.handleOk();
        }}
        onCancel={() => {
          this.handleCancel();
        }}
      >
        <FormRender
          schema={schema}
          formData={this.state.formData}
          onChange={(formData: any) => {
            this.setState({ formData });
          }}
          onValidate={(valid: string[]) => {
            this.setState({ valid });
          }}
          showValidate={this.state.fromPass}
        />
      </Modal>
    );
  }
}

export default ModalDetail;
